<!-- 显示处方消息的UI小组件 -->
<script lang="ts" setup>
  import type { Msg } from '@/types/room'

  interface Props {
    info: Msg
  }
  defineProps<Props>()
</script>

<template>
  <!-- 处方消息（22） -->
  <view class="e-prescription">
    <view class="prescription-content">
      <view class="list-title">
        <view class="label">电子处方</view>
        <view class="extra">
          原始处方
          <uni-icons size="16" color="#848484" type="right" />
        </view>
      </view>
      <view class="list-item"
        >{{ info.prescription?.name }} {{ info.prescription?.genderValue }}
        {{ info.prescription?.age }}岁 {{ info.prescription?.diagnosis }}</view
      >
      <view class="list-item">开方时间：{{ info.prescription?.createTime }}</view>

      <view class="dividing-line"></view>

      <view v-for="item in info.prescription?.medicines" :key="item.id">
        <view class="list-title">
          <view class="label">
            <view> {{ item.name }} {{ item.specs }} </view>

            <view class="list-item">{{ item.usageDosag }}</view>
          </view>
          <text class="quantity">x{{ item.quantity }}</text>
        </view>
      </view>
    </view>
    <navigator
      class="uni-link"
      hover-class="none"
      :url="`/subpkg_medicine/payment/payment?id=${info.prescription?.id}`"
    >
      购买药品
    </navigator>
  </view>
</template>

<style lang="scss">
  .e-prescription {
    width: 100%;
    margin-top: 60rpx;
    border-radius: 20rpx;
    background-color: #eaf8f6;

    .prescription-content {
      padding: 30rpx;
      border-radius: 20rpx;
      background-color: #fff;
    }

    .list-title {
      display: flex;
      align-items: start;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .quantity {
        font-size: 24rpx;
      }
    }

    .list-item {
      margin-bottom: 10rpx;
      font-size: 24rpx;
      color: #848484;
    }

    .label {
      font-size: 28rpx;
      color: #121826;

      &.medicine {
        font-size: 30rpx;
        color: #666;
      }
    }

    .unit {
      width: 200rpx;
    }

    .extra {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #848484;
    }

    :deep(.uniui-right) {
      margin-top: 4rpx;
    }

    .dividing-line {
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;
      border-bottom: 1rpx solid #ededed;
    }

    .uni-link {
      text-align: center;
      line-height: 1;
      padding: 30rpx 0;
      color: #16c2a3;
      font-size: 32rpx;
    }
  }
</style>
